<template>
  <div>
    <!-- 筛选列 -->
    <div class="table-search-columns">
      <a-form-model class="event-log-list-search-form" ref="query" :model="query">
        <a-row>
          <a-col :span="5">
            <a-form-model-item label="操作用户" prop="textParam">
              <a-input v-model="query.username" allowClear/>
            </a-form-model-item>
          </a-col>
          <a-col :span="5">
            <a-form-model-item label="操作描述" prop="textParam">
              <a-input v-model="query.logInfo" allowClear/>
            </a-form-model-item>
          </a-col>
          <a-col :span="5">
            <a-form-model-item label="操作类型" prop="textParam">
              <a-input v-model="query.type" allowClear/>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </div>

    <!-- 表格 -->
    <div class="table-wrapper">
      <!-- 工具 -->
      <div class="table-tools-bar">
        <!-- 左侧 -->
        <div class="tools-fixed-left">
          <span class="table-title">用户操作日志列表</span>
        </div>
        <!-- 右侧 -->
        <div class="tools-fixed-right">
          <a-button type="primary" icon="search" @click="getList({})">
            搜索
          </a-button>
        </div>
      </div>
      <!-- 表格 -->
      <div class="table-main-container table-scroll-x-auto">
        <a-table :columns="columns"
                 :data-source="rows"
                 :pagination="pagination"
                 :loading="loading"
                 rowKey="id"
                 size="middle"
                 @change="getList"
        >
          <template #index="record, text, index">
            {{index+1}}
          </template>
          <template #logInfo="record">
            <span v-html="record.logInfo"></span>
          </template>

          <template #action="record">
            <a-button type="link" @click="getLogParams(record)">日志参数</a-button>
          </template>

        </a-table>
      </div>
    </div>

    <!-- 弹出模态框 -->
    <div>
      <EventLogParamModal ref="paramModal" />
    </div>

  </div>
</template>

<script>

  import { $userEventLogApi } from '../../network/user/UserEventLogApi';
  import { replaceStainKeywords } from '../../lib/utils';
  import EventLogParamModal from "../../components/user/EventLogParamModal";

  const columns = [
		{
			title: '序号',
      key: 'index',
			scopedSlots: {customRender: 'index'},
			align: 'center'
		},
		{
			title: '操作描述',
      key: 'logInfo',
			scopedSlots: {customRender: 'logInfo'},
			align: 'center'
		},
		{
			title: '操作类型',
			dataIndex: 'type',
			scopedSlots: {customRender: 'type'},
			align: 'center'
		},
    {
      title: '操作用户',
      dataIndex: 'nickname',
      scopedSlots: {customRender: 'nickname'},
      align: 'center'
    },
    {
      title: '操作账号',
      dataIndex: 'username',
      scopedSlots: {customRender: 'username'},
      align: 'center'
    },
    {
      title: '操作IP',
      dataIndex: 'ip',
      scopedSlots: {customRender: 'ip'},
      align: 'center'
    },
		{
			title: '操作时间',
			dataIndex: 'time',
			scopedSlots: {customRender: 'time'},
			align: 'center'
		},
		{
			title: '操作',
      key: 'action',
			scopedSlots: {customRender: 'action'},
			align: 'center'
		}
	];

	export default {
		name: "UserEventLog",
    components: {EventLogParamModal},
    data() {
			return {
				columns: columns,
        rows: [],
        pagination: {
          current: 1,
          pageSize: 10,
          total: 0,
          showTotal: (total) => {
            return `共${total}条`;
          },
          showSizeChanger: true,
          pageSizeOptions: ['3', '5', '10', '20'],
          onShowSizeChange: (current, size) => this.pageShowSizeChange(current, size)
        },
        loading: false,
        query: {
          username: '',
          logInfo: '',
          type: null
        },

			}
		},
    methods: {
		  // 获取操作日志列表
      getList(page = this.pagination) {
        this.loading = true;
        $userEventLogApi.getUserEventLogList({
          ...this.query,
          page: page.current,
          limit: page.pageSize
        }).then(({data}) => {
          const pagination = {...this.pagination};
          pagination.total = data.total;
          pagination.current = data.page;
          this.rows = data.rows || [];
          this.rows.forEach((row) => {
            row.logInfo = replaceStainKeywords(row.logInfo);
          });
          this.pagination = pagination;
          this.loading = false;
        }).catch(() => {
          this.loading = false;
        })
      },
      // 分页组件每页显示条数改变
      pageShowSizeChange(current, size) {
        this.pagination.pageSize = size;
      },
      getLogParams(row) {
        this.$refs.paramModal.showParams(row);
      },

    },
    mounted() {
		  this.getList({});
    }
  }
</script>

<style lang="scss" scoped>

</style>
